<template>
  <div :class="['wft-dynamic-comp', animationsClass(comp.style.animate.classNames), { 'animate__infinite': comp.style.animate.isInfinite }]" :style="compStyle">
    <!-- 基础控件 -->
    <component v-if="comp.type != 'advanced'" :cur-comp="comp" :panel-json="panelJson" :is="`${comp.key}Temp`" />
    <!-- 高级 - 容器控件 -->
    <div v-else-if="comp.key == 'container'" class="wft-dynamic-comp-advanced-container">
      <DynamicComp v-for="item in comp.children" :key="item.id" :comp="item" :panel-json="panelJson" />
    </div>
    <!-- 高级 - 表单容器控件 -->
    <AdvancedForm v-else-if="comp.key == 'form' && comp.children!.length" :cur-comp="comp" :panel-json="panelJson" />
    <!-- 高级 - 宫格容器控件 -->
    <AdvancedTrellis v-else-if="comp.key == 'trellis'" :cur-comp="comp" :panel-json="panelJson" />
  </div>
</template>
<script setup lang="ts">
import { animationsClass } from 'generator/utils'
import DynamicComp from './dynamicComp.vue'
import AdvancedForm from './AdvancedForm.vue'
import AdvancedTrellis from './AdvancedTrellis.vue'
import { compDefault, panelJsonDefault } from 'generator/index/Layout/ConfigPanel/widget/default';
import { computed } from 'vue';

const props = withDefaults(defineProps<{
  panelJson?: TPanel,
  comp?: TComp
}>(), {
  panelJson: () => panelJsonDefault,
  comp: () => compDefault
})

// 组件样式
const compStyle = computed(() => {
  const s = <{[k: string]: any}>{}
  const { background, border, percent, zIndex } = props.comp.style
  s.backgroundColor = background.color || 'transparent'
  s.backgroundImage = `url(${background.img})`
  s.backgroundSize = background.size
  s.backgroundRepeat = background.repeat
  s.backgroundPosition = background.position
  s.width = percent.width
  s.height = percent.height
  s.left = percent.left
  s.top = percent.top
  s.zIndex = zIndex ?? 1
  if(border.show) {
    s.border = `${border.width}px ${border.type} ${border.color}`
    s.borderRadius = `${border.radius}px`
  }
  return s
})

</script>
<style scoped>
.wft-dynamic-comp {
  position: absolute;
  background-size: 100% 100%;
}

.wft-dynamic-comp-advanced-container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
</style>
